<template>
  <div class="user-info-container">
    <a-form-model>
      <a-row>
        <a-col v-if="showAdmin" :span="24">
          <a-form-model-item
            label="后台地址"
            :disabled="true"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="username"
          >
            <a href="https://admin.htxincailiao.com" target="_blank" rel="noopener">admin.htxincailiao.com</a>
            <!-- <a-input v-model="model.username" placeholder="4到16位（字母、数字、下划线、中划线)"></a-input> -->
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col v-if="upgrade" :span="24">
              <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountType">
                <a-select v-model="upgradeAccountType" placeholder="请选择升级的账号类型">
                  <a-select-option v-for="(item, index) in accountTypeOptions" :key="index" :value="item.value">{{
                    item.key
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col v-else :span="24">
              <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountType">
                <a-select v-model="currentAccountType" disabled>
                  <a-select-option v-for="(item, index) in fullAccountTypeOptions" :key="index" :value="item.value">{{
                    item.key
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col v-if="allianceAgencyOnlyInfo" :span="24">
              <a-form-model-item label="产业联盟" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="allianceId">
                <j-search-select-tag
                  v-model="model.allianceId"
                  placeholder="请选择产业联盟"
                  dict="ht_alliance,enterprise_name,id"
                />
              </a-form-model-item>
            </a-col>

            <a-col v-if="showSharedInfo" :span="24">
              <a-form-model-item
                label="账号名"
                :disabled="true"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="username"
              >
                <a-input v-model="model.username" placeholder="4到16位（字母、数字、下划线、中划线)"></a-input>
              </a-form-model-item>
            </a-col>

            <div v-if="personalUserOnlyInfo">
              <a-col :span="24">
                <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realName">
                  <a-input v-model="model.realName" placeholder="请输入姓名"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nickname">
                  <a-input v-model="model.nickname" placeholder="请输入昵称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avatar">
                  <j-image-upload :isMultiple="isAvatarMultiple" v-model="model.avatar"></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gender">
                  <j-dict-select-tag type="list" v-model="model.gender" dictCode="gender" placeholder="请选择性别" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthday">
                  <j-date placeholder="请选择生日" v-model="model.birthday" style="width: 100%" />
                </a-form-model-item>
              </a-col>
            </div>

            <div v-if="forumsExpertOnlyInfo">
              <a-col :span="24">
                <a-form-model-item label="所属机构" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="agencyName">
                  <a-input v-model="model.agencyName" placeholder="请输入所属机构"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expertCategoryId">
                  <j-dict-select-tag
                    type="list"
                    v-model="model.expertCategoryId"
                    dictCode="ht_forums_expert_category,name,id"
                    placeholder="请选择分类"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item
                  label="标签（多选）"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="forumsCategoryId"
                >
                  <j-multi-select-tag
                    type="list_multi"
                    v-model="model.forumsCategoryId"
                    dictCode="ht_forums_category,name,id"
                    placeholder="请选择标签"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="资质证件"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="certificateAttachment"
                >
                  <j-upload isMultiple v-model="model.certificate"></j-upload>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="引理摘要" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lemmaSummary">
                  <a-textarea v-model="model.lemmaSummary" rows="4" placeholder="请输入引理摘要" />
                </a-form-model-item>
              </a-col>
            </div>

            <div v-if="enpterpriseUserOnlyInfo">
              <a-col :span="24">
                <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPerson">
                  <a-input v-model="model.contactPerson" placeholder="请输入联系人"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="联系人电话"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="contactPhoneNumber"
                >
                  <a-input v-model="model.contactPhoneNumber" placeholder="请输入联系人电话"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enterpriseName">
                  <a-input v-model="model.enterpriseName" placeholder="请输入企业名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="行业分类ID"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="industryCategoryId"
                >
                  <j-dict-select-tag
                    type="list"
                    v-model="model.industryCategoryId"
                    dictCode="ht_industry_category,name,id"
                    placeholder="请选择行业分类ID"
                  />
                </a-form-model-item>
              </a-col>
              <div v-if="upgrade">
                <a-col :span="24">
                  <a-form-model-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificate">
                    <j-image-upload isMultiple v-model="model.certificate"></j-image-upload>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item
                    label="其他资质"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="otherCertificates"
                  >
                    <j-image-upload isMultiple v-model="model.otherCertificates"></j-image-upload>
                  </a-form-model-item>
                </a-col>
              </div>
              <a-col :span="24">
                <a-form-model-item
                  label="开户银行"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="bankAccountName"
                >
                  <a-input v-model="model.bankAccountName" placeholder="请输入开户银行"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountNum">
                  <a-input v-model="model.bankAccountNum" placeholder="请输入银行账号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="机构Logo" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logo">
                  <j-image-upload isMultiple v-model="model.logo"></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="企业主图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cover">
                  <j-image-upload isMultiple v-model="model.cover"></j-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="经营模式"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="businessModelId"
                >
                  <j-dict-select-tag
                    type="list"
                    v-model="model.businessModelId"
                    dictCode="ht_business_model_category,name,id"
                    placeholder="请选择经营模式"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="注册资金"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="registeredCapital"
                >
                  <a-input v-model="model.registeredCapital" placeholder="请输入注册资金"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="年营业额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="yearlyTurnover">
                  <a-input v-model="model.yearlyTurnover" placeholder="请输入年营业额"></a-input>
                </a-form-model-item>
              </a-col>
            </div>
            <div v-if="showSharedInfo">
              <a-col :span="24">
                <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
                  <a-input v-model="model.email" placeholder="请输入邮箱"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zipcode">
                  <a-input v-model="model.zipcode" placeholder="请输入邮编"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="position">
                  <a-input v-model="model.position" placeholder="请输入职位"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="introduction">
                  <j-editor v-model="model.introduction" />
                </a-form-model-item>
              </a-col>
            </div>
          </a-row>
        </a-form-model>
      </j-form-container>
      <div v-if="showSharedInfo" class="bottom-button-panel">
        <a-button @click="submitClick" type="primary">提交</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapGetters } from 'vuex'
import { accountRules } from '@/utils/account-rules.js'

export default {
  name: 'UserInfo',
  components: {},
  props: {
    upgrade: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      isAvatarMultiple: false,
      currentAccountType: undefined,
      upgradeAccountType: undefined,
      model: {
        username: '',
        password: '',
        gender: 0,
        captcha: '',
        phoneNumber: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      accountTypes: ['问答专家', '平台商户', '评估机构', '产业联盟', '产业联盟成员'],
      fullAccountTypes: [
        '平台会员',
        '问答专家',
        '平台商户',
        '评估机构',
        '产业联盟',
        '产业联盟成员',
        '产业联盟理事会成员',
        '产业联盟专家咨委员会成员',
        '产业联盟秘书处成员',
      ],
    }
  },

  computed: {
    //账户类型:
    // 0-后台用户
    // 1-平台会员
    // 2-问答专家（专题问答）
    // 3-平台商户
    // 4-评估机构
    // 5-产业联盟
    // 6-产业联盟成员
    // 7-产业联盟理事会成员
    // 8-产业联盟专家咨委员会成员
    // 9-产业联盟秘书处成员

    fullAccountTypeOptions() {
      const options = []
      for (let index = 0; index < this.fullAccountTypes.length; index++) {
        const key = this.fullAccountTypes[index]
        const accountType = index + 1
        const option = { key: key, value: accountType }
        options.push(option)
      }
      return options
    },

    accountTypeOptions() {
      const options = []
      for (let index = 0; index < this.accountTypes.length; index++) {
        const key = this.accountTypes[index]
        const accountType = index + 2

        if (accountType !== this.currentAccountType) {
          const option = { key: key, value: accountType }
          if (this.currentAccountType > 2) {
            if (accountType > 2) {
              options.push(option)
            }
          } else {
            options.push(option)
          }
        }
      }
      return options
    },
    showAdmin() {
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const certificateAuditStatus = this.model.certificateAuditStatus
      return (
        !upgrade &&
        certificateAuditStatus === 2 &&
        (currentAccountType === 2 ||
          currentAccountType === 3 ||
          currentAccountType === 4 ||
          currentAccountType === 5 ||
          currentAccountType === 6)
      )
    },

    showSharedInfo() {
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const upgradeAccountType = this.upgradeAccountType
      // 非升级状态，升级状态下必须选中升级类型后才显示对应的信息
      return upgrade === false || (upgrade === true && upgradeAccountType)
    },

    allianceAgencyOnlyInfo() {
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const upgradeAccountType = this.upgradeAccountType
      return (
        (upgrade === false && upgradeAccountType >= 6 && upgradeAccountType <= 9) ||
        (upgrade === true && upgradeAccountType >= 6 && upgradeAccountType <= 9)
      )
    },

    personalUserOnlyInfo() {
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const upgradeAccountType = this.upgradeAccountType
      return (upgrade === false && currentAccountType <= 2) || (upgrade === true && upgradeAccountType <= 2)
    },

    forumsExpertOnlyInfo() {
      // 用户信息时currentAccountType=2需要展示专家独有的信息; 升级时选择了专家用户类型时需要展示专家独有的信息
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const upgradeAccountType = this.upgradeAccountType
      return (upgrade === false && currentAccountType === 2) || (upgrade === true && upgradeAccountType === 2)
    },

    enpterpriseUserOnlyInfo() {
      const upgrade = this.upgrade
      const currentAccountType = this.currentAccountType
      const upgradeAccountType = this.upgradeAccountType
      return (upgrade === false && currentAccountType >= 3) || (upgrade === true && upgradeAccountType >= 3)
    },

    validatorRules() {
      const username = this.info ? this.info.username : undefined
      var rules = []
      if (this.upgrade) {
        return {
          username: accountRules.usernameEditValidateRule(this.validateUsernameAction, username),
          zipcode: [{ required: false }, { pattern: /^[1-9]\d{5}$/, message: '请输入正确的邮政编码!' }],
          enterpriseName: [{ required: true, message: '请输入企业名称' }],
          contactPerson: [{ required: true, message: '请输入联系人!' }],
          contactPhoneNumber: [{ required: true, message: '请输入手机号!' }],
        }
      } else {
        return {
          username: accountRules.usernameEditValidateRule(this.validateUsernameAction, username),
          zipcode: [{ required: false }, { pattern: /^[1-9]\d{5}$/, message: '请输入正确的邮政编码!' }],
        }
      }
    },

    ...mapState('user', {
      info: (state) => state.info,
    }),
  },
  created() {
    this.getUserInfo()
  },
  activated() {
    this.getUserInfo()
  },

  updated() {},

  mounted() {},
  methods: {
    ...mapActions('user', ['getUserInfoAction', 'updateUserInfoAction', 'validateUsernameAction', 'upgradeUserAction']),

    submitClick() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (valid) {
          if (that.upgrade) {
            that.upgradeUser()
          } else {
            that.updateUserInfo()
          }
        } else {
          that.$message.error('输入信息有误，请按提示修改')
        }
      })
    },

    getUserInfo() {
      const that = this
      this.getUserInfoAction()
        .then(() => {
          that.model = JSON.parse(JSON.stringify(that.info))
          that.currentAccountType = that.model.accountType
          that.$forceUpdate()
        })
        .catch(() => {
          that.$message.error('获取用户信息失败')
        })
    },

    updateUserInfo() {
      const that = this
      const parameters = {
        ...that.model,
      }
      that.confirmLoading = true
      that
        .updateUserInfoAction(parameters)
        .then((response) => {
          that.confirmLoading = false
          if (response && response.success) {
            that.$message.success('修改成功')
          } else {
            that.$message.response(response.message)
          }
        })
        .catch((error) => {
          that.confirmLoading = false
          that.$message.error(error.message)
        })
    },

    upgradeUser() {
      const that = this
      const parameters = {
        ...that.model,
        currentAccountType: that.currentAccountType,
        upgradeAccountType: that.upgradeAccountType,
      }
      that.confirmLoading = true
      that
        .upgradeUserAction(parameters)
        .then((response) => {
          that.confirmLoading = false
          if (response && response.success) {
            // that.getUserInfo()
            // window.location.reload()
            that.$message.success('提交成功')
          } else {
            that.$message.error(response.message)
          }
        })
        .catch((error) => {
          that.confirmLoading = false
          that.$message.error(error.message)
        })
    },
  },
}
</script>

<style scoped lang="less">
@import '~@/views/account/profile/shared.less';
.user-info-container {
  width: 100%;
}
</style>

